<template>
	<view>
		<view class="recharge">
			<view class="main-box">
				<view class="head-box theme-colors z-padding-t-100 z-padding-b-100">
					<view class="money z-text-c">
						￥
						<text class="z-font-64">{{ skill.ensure_price }}</text>
					</view>
					<view class="bzj z-text-c">已缴纳保证金（元）</view>
				</view>

				<view class="centent-box">
					<view class="z-padding-t-32 z-padding-lr-32 title">选择充值金额</view>
					<view class="z-flex-c-s-b z-padding-t-40 z-padding-lr-32 money-box">
						<view
							class="z-margin-b-24"
							:class="price == item ? 'cur-each-money z-text-c' : 'each-money z-text-c'"
							v-for="(item,index) in money"
							:key="index"
							@tap="cut(item)"
						>
							￥
							<text class="z-font-40">{{ item }}</text>
						</view>
					</view>

					<view class="input z-padding-32 z-margin-t-30">
						<input placeholder="输入充值金额" type="digit" v-model="price" @input="setPrice" />
					</view>

					<view class="z-padding-t-32 z-padding-lr-32 title">支付方式</view>
					<!-- 微信 -->
					<view class="pay-way z-padding-lr-32 z-padding-tb-40 z-margin-t-24 z-flex-c-s-b">
						<view>
							<image class="pay-logo z-margin-r-24" src="../../static/service/wx.png"></image>
							微信
						</view>
						<image @tap="wx" class="select-img" :src="paytype == 0 ? '../../static/service/checkbox.png' : '../../static/service/check.png'"></image>
					</view>

					<view class="bzj-text z-flex z-font-28 z-margin-t-40" @tap="clickread">
						<image src="../../static/service/check.png" v-if="!agree" class="choose_img z-margin-r-8" mode="" />
						<image src="../../static/service/checkbox.png" v-else class="choose_img z-margin-r-8" mode="" />
						已阅读并同意
						<text class="theme-color" @tap.stop="infoTap">《保证金协议》</text>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="order-btn-box z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="btn z-text-c theme-colors" @tap="pay">充值</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agree: false,
			money: ['100', '200', '300', '500', '1000', '2000'],
			active: 0,
			price: 100,
			paytype: 0,
			info: '',
			skill:'',
			safeBottom: `20px`
		};
	},
	onLoad(options) {
	},
	onShow() {
	    this.getInfo()
	  },
	methods: {
		infoTap() {
			let id = uni.getStorageSync('config').service_ensure_info_id
			this.util.skip('/service/info/info?id=' + id + '&name=保证金协议');
		},
		setPrice() {
			active: ''
		},
		cut(e) {
			this.price = e
		},
		clickread() {
			this.agree = !this.agree
		},
		pay() {
			if (!this.agree) {
				this.util.toast('请先阅读并同意《保证金协议》');
				return;
			}
			this.http.post('ensure/skillensure', {
				type: 'pay',
				paytype: this.paytype,
				price: this.price
			}).then((res) => {
				uni.requestPayment({
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: (res) => {
						this.util.toast('支付成功');
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('changePlus');
						this.getInfo();
					},
					fail: (res) => {
						this.util.toast('支付失败');
					}
				});
			});
		},
		getInfo() {
			this.http.get('skill/skillindex').then((res) => {
				this.info = res.data
				this.skill = this.info.skill
			});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.recharge {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	overflow-y: auto;
	flex: 1;
}

.money-box {
	flex-wrap: wrap;
}
.money {
	color: #fff;
	font-size: 26rpx;
	font-weight: bold;
	color: #ffffff;
}
.bzj {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	padding-top: -20;
}

.centent-box {
	width: 750rpx;
	background: #edf1f4;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;
	top: -50rpx;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}
.each-money {
	width: 213rpx;
	height: 114rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	line-height: 114rpx;
	font-size: 22rpx;
	font-weight: bold;
	color: #1c274c;
	border: 2rpx solid #fff;
}
.cur-each-money {
	width: 213rpx;
	height: 114rpx;
	background: rgba(22, 119, 255, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #1677ff;
	font-size: 22rpx;
	font-weight: bold;
	color: #1677ff;
	line-height: 114rpx;
}

.input {
	width: 622rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin: auto;
}
.pay-way {
	width: 622rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin: auto;
}
.pay-logo {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
}
.select-img {
	width: 32rpx;
	height: 32rpx;
}
.bzj-text {
	font-size: 20rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.order-btn-box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.btn {
	width: 686rpx;
	height: 98rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 98rpx;
	margin: auto;
	font-size: 30rpx;
	font-weight: bold;
	color: #ffffff;
}

.choose_img {
	width: 30rpx;
	height: 30rpx;
}
</style>
